<template>
  <transition name="move">
    <div class="goods-detail" v-show="isShow" ref="foodRef">
      <div class="scroll-wrap">
        <div class="img-header">
          <img class="img" :src="goods.image" />
          <div class="back" @click="hide">
            <i class="icon-arrow_lift"></i>
          </div>
        </div>
        <div class="goods-info">
          <h1 class="name">{{goods.name}}</h1>
          <div class="desc">
            <span class="count">月销售{{goods.sellCount}}份</span>
            <span class="rating">好评{{goods.rating}}%</span>
          </div>
          <div class="price">
            <div class="newPrice">
              <span class="iconfont">¥</span>
              {{goods.price}}
            </div>
            <div class="oldPrice" v-if="goods.oldPrice">
              <span class="iconfont">¥</span>
              {{goods.oldPrice}}
            </div>
          </div>
          <transition name="fade">
            <span
              v-show="!goods.count || goods.count === 0"
              class="addCart-btn"
              @click.prevent="addCart"
            >加入购物车</span>
          </transition>
          <div class="cartContro">
            <keep-alive>
              <cart-control v-show="goods.count" :food="goods" ref="cartConRef"></cart-control>
            </keep-alive>
          </div>
        </div>
        <split-line v-if="goods.info"></split-line>
        <div class="present" v-if="goods.info">
          <h1 class="title">商品介绍</h1>
          <div class="desc">
            <p class="content">{{goods.info}}</p>
          </div>
        </div>
        <split-line></split-line>
        <div class="assess">
          <h1 class="title">商品评价</h1>
          <rating-select
            @select="select"
            @toggleContent="toggleContent"
            :selectType="selectType"
            :desc="desc"
            :onlyContent="onlyContent"
            :ratings="goods.ratings"
          ></rating-select>
          <div class="ratings-wrapper">
            <ul class="ratings" v-show="goods.ratings && goods.ratings.length > 0">
              <li
                v-show="needShow(rate.rateType,rate.text)"
                class="ratings-item"
                v-for="(rate,i) in  goods.ratings"
                :key="i"
              >
                <div class="user">
                  <span class="username">{{rate.username}}</span>
                  <img class="img" :src="rate.avatar" />
                </div>
                <div class="time">{{rate.rateTime | pattern('yyyy-MM-dd hh:mm')}}</div>
                <div class="content">
                  <i
                    class="iconfont"
                    :class="{'icon-thumb_down': rate.rateType === 1,'icon-thumb_up': rate.rateType === 0}"
                  ></i>
                  <span class="text">{{rate.text}}</span>
                </div>
              </li>
            </ul>
            <div class="no-rating" v-show="!goods.ratings || goods.ratings.length <= 0">暂无评价</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll'
import cartControl from '../cartControl/CartControl'
import splitLine from '../SplitLine'
import ratingSelect from '../ratings/RatingSelect'
import Vue from 'vue'

// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2
export default {
  props: {
    goods: { type: Object }
  },
  data() {
    return {
      isShow: false,
      foodScroll: null,
      onlyContent: false,
      selectType: ALL,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  components: {
    cartControl,
    splitLine,
    ratingSelect
  },
  methods: {
    show() {
      this.isShow = true
      this.$nextTick(() => {
        if (!this.foodScroll) {
          this.foodScroll = new BScroll(this.$refs.foodRef, {
            click: true
          })
        } else {
          this.foodScroll.refresh()
        }
      })
    },
    hide() {
      this.isShow = false
    },
    addCart(event) {
      Vue.set(this.goods, 'count', 1)
      this.$emit('handleSelectFoods')
    },
    select(type) {
      this.selectType = type
      this.$nextTick(() => {
        this.foodScroll.refresh()
      })
    },
    toggleContent() {
      this.onlyContent = !this.onlyContent
      this.$nextTick(() => {
        this.foodScroll.refresh()
      })
    },
    needShow(type, text) {
      // 只看有内容的评价,但是该条没有评价，过滤掉
      if (this.onlyContent && !text) {
        return false
      } else if (this.selectType === ALL) {
        // 是否为全部
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  computed: {}
}
</script>

<style scoped lang="stylus">
.goods-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: #fff;
  transition: all 0.2s linear;
  transform: translate(0, 0);

  .scroll-wrap {
    padding-bottom: 0.9rem;
  }

  &.move-enter, &.move-leave-to {
    transform: translate(100%, 0);
  }

  .goods-info {
    padding: 0.36rem;
    position: relative;

    .name {
      font-size: 0.28rem;
      font-weight: 700;
      color: rgb(7, 17, 27);
    }

    .desc {
      margin-top: 0.16rem;
      color: rgb(147, 158, 159);

      .count {
        margin-right: 0.24rem;
      }
    }

    .price {
      margin-top: 0.36rem;

      .newPrice {
        color: rgb(240, 20, 20);
        font-size: 0.28rem;
        font-weight: 700;
        display: inline-block;
        margin-right: 0.24rem;

        .iconfont {
          font-weight: 400;
          font-size: 0.2rem;
        }
      }

      .oldPrice {
        color: rgb(147, 153, 159);
        text-decoration: line-through;
        font-weight: 700;
        display: inline-block;
        font-size: 0.2rem;

        .iconfont {
          font-weight: 400;
        }
      }
    }

    .addCart-btn {
      position: absolute;
      right: 0.36rem;
      bottom: 0.24rem;
      display: block;
      width: 1.48rem;
      height: 0.48rem;
      background-color: rgb(0, 160, 220);
      color: #fff;
      line-height: 0.48rem;
      font-size: 0.2rem;
      border-radius: 0.24rem;
      text-align: center;
      transition: all 0.2s;
      opacity: 1;

      &.fade.enter, &.fade-leave-to {
        opacity: 0;
      }
    }

    .cartContro {
      position: absolute;
      right: 0.36rem;
      bottom: 0.14rem;
    }
  }

  .present {
    padding: 0.36rem;

    .title {
      color: rgb(7, 17, 27);
      font-size: 0.28rem;
      font-weight: 600;
    }

    .desc {
      margin-left: 0.16rem;
      margin-top: 0.12rem;
      font-size: 0.24rem;
      line-height: 0.48rem;

      .content {
        color: rgb(77, 85, 93);
        font-weight: 200;
      }
    }
  }

  .assess {
    .title {
      margin-top: 0.36rem;
      margin-left: 0.36rem;
      color: rgb(7, 17, 27);
      font-size: 0.28rem;
      font-weight: 600;
    }

    .ratings-wrapper {
      padding: 0 0.36rem;

      .ratings {
        .ratings-item {
          display: block;
          position: relative;
          margin: 0.32rem 0;
          border-bottom: 1px solid rgba(7, 17, 27, 0.1);

          .user {
            position: absolute;
            right: 0;
            top: 0;

            .img {
              display: inline-block;
              width: 0.24rem;
              height: 0.24rem;
              border-radius: 50%;
              vertical-align: middle;
              margin-left: 0.12rem;
            }
          }

          .time {
            font-size: 0.2rem;
            color: rgb(147, 153, 159);
            line-height: 0.24rem;
          }

          .content {
            font-size: 0.24rem;

            .iconfont {
              line-height: 0.48rem;
              vertical-align: middle;
              margin-right: 0.08rem;

              &.icon-thumb_down {
                color: rgb(147, 153, 159);
              }

              &.icon-thumb_up {
                color: rgb(0, 160, 220);
              }
            }

            .text {
              color: rgb(7, 17, 27);
            }
          }
        }
      }

      .no-rating {
        margin: 0.32rem 0;
        text-align: center;
        font-size: 0.28rem;
        font-weight: 700;
        color: rgb(147, 153, 159);
      }
    }
  }

  .img-header {
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 100%;

    .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .back {
      position: absolute;
      left: 0.3rem;
      top: 0.366rem;
      color: #fff;
      font-size: 0.28rem;
    }
  }
}
</style>>
